import React, { useState, createContext, useContext } from 'react'
import { Tabs, Button } from 'antd';
import Tab1 from './components/Tab1';
import Tab3 from './components/Tab3';
import Tab4 from './components/Tab4';
import Tab5 from './components/Tab5';
import Tab7 from './components/Tab7';
import "./creaList.css"

function CreatList(props: any) {
    const { TabPane } = Tabs;

    const DivContext = createContext(null);

    const callback = (key: any) => {
        console.log(key);
    }

    return (
        <div className="creatList">
            <Tabs onChange={callback} type="card" className="tabs">
                <TabPane tab={<span className="span">基本信息</span>} key="1">
                    <Tab1 />
                </TabPane>
                <TabPane tab={<span className="span">英雄皮肤</span>} key="2">
                    <Button type="primary">+添加皮肤</Button>
                </TabPane>
                <TabPane tab={<span className="span">介绍视频</span>} key="3">
                    <Tab3 />
                </TabPane>
                <TabPane tab={<span className="span">出装推荐</span>} key="4">
                    <Tab4 />
                </TabPane>
                <TabPane tab={<span className="span">使用技巧</span>} key="5">
                    <Tab5 />

                </TabPane>
                <TabPane tab={<span className="span">技能管理</span>} key="6">
                    <Button type="primary">+添加技能</Button>
                </TabPane>
                <TabPane tab={<span className="span">英雄关系</span>} key="7">
                    <Tab7 />
                </TabPane>
            </Tabs>
        </div>
    )
}
export default CreatList